<template>
  <el-dialog v-loading="loading" :title="activeheader" width="500px" :visible.sync="dialogVisible" :before-close="cancle">
    <div class="dialog-content">
      <div class="list">
        <span class="require"><i>用户姓名：</i></span>
        <el-input class="com-input" placeholder="请输入用户姓名" v-model="name" />
      </div>
      <div class="list">
        <span class="require"><i>用户账号：</i></span>
        <el-input class="com-input" placeholder="请输入用户账号" v-model="account" />
      </div>
      <div class="list">
        <span class="require"><i>用户密码：</i></span>
        <el-input class="com-input" type="password" placeholder="请输入用户密码" v-model="password" />
      </div>
      <div class="list">
        <span>用户手机：</span>
        <el-input class="com-input" placeholder="请输入用户手机号" v-model="mobile" />
      </div>
      <div class="list">
        <span class="require"><i>所属角色：</i></span>
        <el-select class="com-input" v-model="roleId" placeholder="请输入所属角色" :disabled="roleType">
          <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <span v-show="roleType" class="red">请先新建角色信息</span>
      </div>
      <div class="list">
        <span>用户状态：</span>
        <el-select class="com-input" v-model="state" placeholder="请输入用户状态">
          <el-option v-for="item in stateList" :key="item.id" :label="item.dValue" :value="item.id" />
        </el-select>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { stateList, getRoles } from "data/listBody";
import check from "utils/check";
import md5 from 'md5';
let requireArray = ["name", "account", "password", "roleId"]; //必传字段
let headers = ["新增用户", "信息编辑"];
export default {
  name: "systemUseradd",
  props: ["type", "id"],
  data() {
    return {
      stateList,
      getRoles,
      dialogVisible: true,
      loading: false,
      name: "",
      state: "",
      roleId: "",
      account: "",
      password: "",
      mobile: "",
      roleList: [],
      roleType: false,
      activeheader: headers[0],
      check: check.methods.check,
      checkTip: check.tips.checkTip
    };
  },
  mounted() {
    this.editInit();
  },
  methods: {
    editInit() {
      getRoles(data => {
        this.roleList = data;
        if(this.roleList.length > 0) return this.roleType = false;
        this.roleType = true;
      });
      if( this.type === 'edit' ) this.activeheader = headers[1];
      if( !this.id ) return;
      this.loading = true;
      this.api.get(`/user/${this.id}`).then((res) => { //查询产品详情
        this.dataInit(res.data)
        this.loading = false;
      }).catch((err) => {
        console.log(err)
        this.loading = false;
        this.$message(err.message)
      })
    },
    dataInit(data) {
      data = data || {};
      let { account, mobile, id, name, roleId, roleName, state } = data;
      this.account = account;
      this.mobile = mobile;
      this.id = id;
      this.name = name;
      this.roleId = roleId;
      this.roleName = roleName;
      this.state = state;
    },
    submit() {
      let params = {
        name: this.name,
        account: this.account,
        password: md5(this.password),
        mobile: this.mobile,
        state: this.state,
        roleId: this.roleId
      };
      let param = this.lodash.assign({}, params);
      this.check(param, requireArray)
        .then(() => {
            this.addUser(param);
          },() => {
            this.$message(this.checkTip);
        })
        .catch(err => {
          console.log(err);
          this.$message(err.data.message);
        });
    },
    editUser(param) {
      //修改用户
      param.id = this.id;
      this.api.put("/user", param, "form")
        .then(res => {
          this.$emit("search");
          this.$emit("dialogState", { state: false });
        })
        .catch(err => {
          console.log(err);
          this.$message(err.data.message);
        });
    },
    addUser(param) {
      //添加用户
      if (this.activeheader === headers[1]) return this.editUser(param);
      this.api.post("/user", param, "form").then(res => {
          this.$emit("search");
          this.$emit("dialogState", { state: false });
        })
        .catch(err => {
          this.$message(err.data.message);
        });
    },
    cancle() {
      this.$emit("dialogState", { state: false });
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-content {
  .el-input {
    width: 217px;
  }
  .red {
    color: red;
  }
  .list {
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    span {
      display: inline-block;
      min-width: 120px;
      text-align: right;
      i {
        display: inline-block;
        font-style: normal;
      }
      &.require {
        i {
          position: relative;
          &::after {
            position: absolute;
            content: "*";
            color: red;
            left: -10px;
            top: 2px;
          }
        }
      }
    }
  }
}
</style>